<template>
  <div class="stock-item">
    <el-row :gutter="gutter" class="stock-detail-info">
      <el-col :span="12" :style="style">
        <span>出库单号：</span>
        <span>{{ stockItem.outboundRespDto.outboundNo }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>出库状态：</span>
        <span>{{ stockItem.outboundRespDto.outboundStatusName }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>发货时间：</span>
        <span>{{ formatTime(stockItem.outboundRespDto.outboundTime, 'YYYY-MM-DD') }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>国内物流公司：</span>
        <span>{{ stockItem.outboundRespDto.domesticLogisticsCompany }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>国内物流单号：</span>
        <span>{{ stockItem.outboundRespDto.domesticLogisticsNo }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>国外物流公司：</span>
        <span>{{ stockItem.outboundRespDto.foreignLogisticsCompany }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>国外物流公司网站：</span>
        <span>{{ stockItem.outboundRespDto.foreignLogisticsWebsite }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>国外物流单号：</span>
        <span>{{ stockItem.outboundRespDto.foreignLogisticsNo }}</span>
      </el-col>
      <el-col :span="12" :style="style">
        <span>提单日期：</span>
        <span>{{ formatTime(stockItem.outboundRespDto.foreignLogisticsApplyTime, 'YYYY-MM-DD') }}</span>
      </el-col>

      <el-col :span="24" :style="style">
        <span>附件：</span>
        <el-form v-if="stockItem.outboundRespDto.attachmentList && stockItem.outboundRespDto.attachmentList.length" ref="form" label-width="150px">
          <div
            v-for="ele in stockItem.outboundRespDto.attachmentList"
            :key="ele.id"
          >
            <el-col :span="24">
              {{
                isSfType(ele.attachmentUrl)
                  ? `[SF] ${ele.filename}`
                  : `[OMS] ${ele.filename}`
              }}
              <el-button
                v-if="isSfType(ele.attachmentUrl)"
                type="text"
                :style="{
                  marginLeft: '25px',
                  color: '#0072FF',
                  cursor: 'pointer',
                }"
                @click="previewHandle(ele.attachmentUrl, ele.filename)"
              >
                预览
              </el-button>
              <el-button
                v-if="
                  !isSfType(ele.attachmentUrl) &&
                    isPreviewType(ele.filename)
                "
                type="text"
                :style="{
                  marginLeft: '25px',
                  color: '#0072FF',
                  cursor: 'pointer',
                }"
                @click="previewHandle(ele.attachmentUrl, ele.filename)"
              >
                预览
              </el-button>
              <a
                v-if="!isSfType(ele.attachmentUrl)"
                :href="ele.attachmentUrl"
                :style="{
                  marginLeft: '10px',
                  color: '#0072FF',
                  cursor: 'pointer',
                }"
              >
                <el-button type="text"> 下载 </el-button>
              </a>

              <el-popconfirm
                :style="{
                  margin: '0',
                  padding: '0',
                }"
                title="是否确认删除该附件？"
                @confirm="deleteHandle(ele.id)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  :style="{
                    margin: '0',
                    padding: '0',
                    marginLeft: '10px',
                  }"
                >
                  <span
                    :style="{
                      color: '#F56C6C',
                    }"
                  >删除</span>
                </el-button>
              </el-popconfirm>
            </el-col>
          </div>
        </el-form>
      </el-col>
    </el-row>

    <StockDetailTable
      :table-data="stockItem.outboundItemRespDtoList"
      :table-list="outboundList"
    />

    <BlockDialog v-if="curUrl" :url="curUrl" title="预览" :name="curName" @close="closeHandle" />
  </div>
</template>

<script>
import StockDetailTable from './StockDetailTable'
import { formatTime, isSfType, isPreviewType } from '@/utils/tools'
import { deleteOutboundAttachment } from '@/service/ship'
import BlockDialog from '@/components/BlockDialog'
export default {
  name: 'StockoutItem',
  components: {
    StockDetailTable,
    BlockDialog
  },
  props: {
    gutter: {
      type: Number,
      default: 12
    },
    stockItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      appendixList: [],
      style: {
        marginTop: '22px'
      },
      isSfType,
      isPreviewType,
      curUrl: '',
      curName: '',
      outboundList: [
        {
          label: 'SKU',
          prop: 'skuCode',
          align: 'center'
        },
        {
          label: '英文产品名',
          prop: 'productNameEn',
          align: 'center'
        },
        {
          label: '中文产品名',
          prop: 'productNameZh',
          align: 'center'
        },
        {
          label: '产品型号',
          prop: 'productTypeName',
          align: 'center'
        },
        {
          label: '已出库数量',
          prop: 'shippedQuantity',
          align: 'center'
        }
      ]
    }
  },
  methods: {
    formatTime,
    async deleteHandle(urlId) {
      const { outboundRespDto: { id }} = this.stockItem
      await deleteOutboundAttachment({ urlId, outboundId: id })
      this.$message({
        type: 'success',
        message: '删除成功'
      })
      this.$emit('getOutboundDetail')
    },
    getStatusLabel(status, list = []) {
      const item = list.find(it => +it.value === +status) || {}
      return item.label
    },
    // 预览
    previewHandle(curUrl, curName) {
      // SF全部是新建窗口打开
      if (isSfType(curUrl)) {
        window.open(curUrl)
        return
      }
      // SF全部是新建窗口打开
      if (isPreviewType(curName)) {
        this.curUrl = curUrl
        this.curName = curName
      } else {
        window.location.href = curUrl
      }
    },
    // 清除url
    closeHandle() {
      this.curUrl = ''
      this.curName = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.stock-item {
  .stock-detail-info {
    font-size: 14px;
    margin-bottom: 22px;
  }
}
</style>
